<!--金刚区-->
<template>
  <section
    v-if="list.length > 0"
    class="diamond-area"
    :style="{ 'margin-top': top }"
  >
    <section
      class="menu-container"
      :style="{
        borderRadius: radiusSize,
        marginRight: spacing,
        marginLeft: spacing,
        paddingTop: paddingTopBottom,
        paddingBottom: paddingTopBottom,
        'background-color': bgcolor,
        'background-image': `url(${imgBg})`,
        'background-repeat': 'no-repeat',
        'background-size': '100% 100%',
        'background-position': 'top center',
      }"
    >
      <section
        v-for="(item, index) in list"
        :key="index"
        class="menu-item"
        :style="{ width: showType || '25%' }"
      >
        <section
          class="img-box"
          :style="{ width: imageWidth, height: imageHeight }"
        >
        <label-comp v-if="labelObj!==undefined" :label-list="item.labelList"></label-comp>
          <van-image
            :src="
              setImgPath(getMapping(item, 'icon'), getMapping(item, 'icon'))
            "
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="" />
            </template>
          </van-image>
        </section>
        <section class="menu-title etc">{{ getMapping(item, "name") }}</section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
import LabelComp from "@/components/CustomPage/apps/widget/labelComp";
export default {
  name: 'DiamondArea',
  mixins: [mixins, mixin],
  components:{LabelComp},
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          name: '菜单1',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单2',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单3',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单4',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单5',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单6',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单7',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          name: '菜单8',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        }

      ]
    }
  },
  computed: {

    // 图片宽高
    imageWidth() {
      return this.px2rem(this.option.imageWidth || 80)
    },
    // 图片高
    imageHeight() {
      return this.px2rem(this.option.imageHeight || 80)
    },
    // 背景颜色
    bgcolor() {
      return this.option.bgcolor
    },
    imgBg() {
      return this.option.imgBg
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    setData(result) {
      if (this.option.dataorigin === '2') {
        if (result?.dataList?.data.configValue) {
          this.list = JSON.parse(result?.dataList?.data.configValue)
        }
      } else {
        this.list = result?.dataList?.data
      }
    },
    init() {
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";

.diamond-area {
  margin: 0 auto;
  position: relative;
  width: rem(750);

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: rem(16);
    background-color: #fff;

    .menu-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: rem(10);

      .img-box {
        width: rem(80);
        height: rem(80);

        .van-image {
          width: 100%;
          height: 100%;

          .van-image__error {
            > img {
              width: rem(80);
              height: rem(80);
            }
          }
        }
      }

      .menu-title {
        margin-top: rem(20);
        font-size: rem(26);
        text-align: center;
      }
    }
  }
}
</style>
